<template>
	<view class="container">
		<view class="content">
			<textarea class="input_area" v-model="content" maxlength="500" placeholder="请详细描述您的问题，我们将尽快为您解决。"></textarea>
		</view>
		<!-- <view class="img_bg">
			<image src="/static/images/"></image>
		</view> -->
		<view class="contact_bg">
			<input class="input" v-model="contact" placeholder="您的手机/QQ/邮箱"/>
		</view>
		<view class="footer">
			<view class="submit" @click="submit()">提交</view>
		</view>
	</view>
</template>

<script>
	import {feedback} from '@/api/user_common.js';
	export default {
		data() {
			return {
				content:'',
				contact:'',
				operationing:false,
			}
		},
		methods: {
			//提交数据
			submit(){
				if(this.content.length == 0 || this.content.length > 500){
					uni.showToast({
						icon:'none',
						title:'请输入意见内容，不超500字'
					});
					return;
				}
				if(this.contact.length == 0 || this.contact.length > 20){
					uni.showToast({
						icon:'none',
						title:'请输入正确的联系方式'
					});
					return;
				}
				if(this.operationing){
					return;
				}
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确定提交？',
				    success: function (res) {
				        if (res.confirm) {
							that.operationing = true;
							uni.showLoading({
								title:'处理中...'
							});
							feedback({content:that.content,contact:that.contact}).then((res) => {
								uni.hideLoading();
								uni.showToast({
									icon:'none',
									title:res.msg
								});
								that.content = '';
								that.contact = '';
								that.operationing = false;
							});
						}
					},
				});
				
			}
		}
	}
</script>

<style lang="scss">
	.container{
		
	}
	.content{
		background-color: white;
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		padding: 30rpx 30rpx;
		.input_area{
			height: 200rpx;
			font-size: 28rpx;
			color: black;
		}
	}
	.contact_bg{
		background-color: white;
		margin-top: 10rpx;
		display: flex;
		flex-direction: row;
		padding: 0 30rpx;
		.input{
			height: 80rpx;
			font-size: 28rpx;
			color: black;
			flex: 1;
		}
	} 
	.footer{
		margin-top: 100rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		.submit{
			width: 80%;
			height:80rpx;
			background-color: #f1ad45;
			line-height: 80rpx;
			border-radius: 40rpx;
			color: white;
			font-size: 28rpx;
			text-align: center;
		}
	}
</style>
